<template>
	<view class='page'>
		<!-- 搜索功能 -->
		<view class="uni-search-box">
			<uni-search-bar ref="searchBar" radius="100" cancelButton="none"  disabled placeholder="搜索科室、医生">
			</uni-search-bar>
		</view>
		<!-- 首页分类开始 -->
		<view class="classify_wrap">
		<!-- 横向分类滚动 -->
			<view class="classify_scroll_x">
				<scroll-view scroll-x="true" >
					 <view class="segmented-wrap">
						<uni-segmented-control :current="current" :values="classify" @clickItem="onClickItem" styleType="text" activeColor="#CC0000"></uni-segmented-control>
					</view>
				</scroll-view>
			</view>
		
			<!-- 分类 icon 开始 -->
			<view class="classify_icon">
				<uni-icons type="list" size="28" color="gray"></uni-icons>
			</view>
			<!-- 分类 icon 结束 -->
		</view>
			
			
		
		<!-- 轮播图开始 -->
	<!-- 	<view class="uni-margin-wrap">
			<unicloud-db v-slot:default="{data, loading, error, options}" collection="opendb-banner" >
				<view v-if="error">{{error.message}}</view>
				<view v-else>
					<swiper class="swiper" circular :indicator-dots="indicatorDtos" :autoplay="autoplay" :interval="interval" :duration="duration">
						<swiper-item v-for="(item, index) in data" :key="item._id" >
							<view class="swiper-item" >
								<image  class="banner-image" :src="item.bannerfile.url" mode="aspectFill" :draggable="flase"></image>
							</view>
						</swiper-item>
					</swiper>
					
				</view>
			</unicloud-db>
		</view> -->
		<!-- 分块访问开始 -->
		<!-- <view class="vip-wrap">
			<uni-grid :column="number" :square="false">
				<uni-grid-item>
					<view class="grid-item-box">
						
						<text>预约挂号</text>
					</view>
				</uni-grid-item>
				<uni-grid-item>
					<view class="grid-item-box">
						
						<text>在线问诊</text>
					</view>
				</uni-grid-item>
				<uni-grid-item>
					<view class="grid-item-box">
						<text>报告查询</text>
					</view>
				</uni-grid-item>
			</uni-grid>			
		</view> -->
		<!-- 结束 -->
		
		
		<view class="content">
			<view v-show="current === 0">
				<!-- 轮播图开始 -->
				<view class="uni-margin-wrap">
					<unicloud-db v-slot:default="{data, loading, error, options}" collection="opendb-banner" >
						<view v-if="error">{{error.message}}</view>
						<view v-else>
							<swiper class="swiper" circular :indicator-dots="indicatorDtos" :autoplay="autoplay" :interval="interval" :duration="duration">
								<swiper-item v-for="(item, index) in data" :key="item._id" >
									<view class="swiper-item" >
										<image  class="banner-image" :src="item.bannerfile.url" mode="aspectFill" :draggable="flase"></image>
									</view>
								</swiper-item>
							</swiper>
						</view>
					</unicloud-db>
				</view>		
				<!-- 轮播图结束 -->
				
				<!-- 开始 -->
				<uni-section >
					<uni-grid :column="3" border-color="white">
						<uni-grid-item :index="0">
							<view class="grid-item-box">
								<image class="image" style="width:235rpx; height: 250rpx;border-radius: 10%;" src="/static/tabbar/预约.png" mode="scaleToFill"  />
							</view>
						</uni-grid-item>
						<uni-grid-item :index="1">
							<view class="grid-item-box">
								<image class="image" style="width:235rpx; height: 250rpx;border-radius: 10%;" src="/static/tabbar/在线.png" mode="scaleToFill" />
							</view>
						</uni-grid-item>
						<uni-grid-item :index="2">
							<view class="grid-item-box">
								<image class="image" style="width:235rpx; height: 250rpx;border-radius: 10%;" src="/static/tabbar/报告.png" mode="scaleToFill" />
							</view>
						</uni-grid-item>
					</uni-grid>
				</uni-section>
				<!-- 结束 -->
				
				<!-- 常用功能开始 -->
				<view class="hospitalCard">
					<uni-card title="常用功能">
						<uni-grid :column="column" :show-border="false" :square="false">
							<uni-grid-item v-for="(item, index) in vipItem">
								<view class="grid-item-box2">
									<image :src="item.icon" style="width: 70rpx; height: 70rpx; " mode="scaleToFill"></image>
									<text style="font-size: 12px;">{{ item.text }}</text>
								</view>
							</uni-grid-item>
						</uni-grid>
					</uni-card>
				</view>
				<!-- 常用功能结束 -->
				<!-- 推荐医生开始 -->
				<view class="worker">
					<uni-card title="推荐医生" extra="更多...">
						<!-- 列表开始 -->
						<view class="doctor">
							<unicloud-db v-slot:default="{data, loading, error, options}" collection="doctor">
								<view v-if="error">{{error.message}}</view>
								<view v-else>
									<uni-list>
										<uni-list-item v-for="(item, index) in data">
											<!-- 图片开始 -->
											<template v-slot:header>  
											    <view class="slot-box">
											      <image class="slot-image" :src="item.doctorImage.url" mode="widthFix"></image>
											    </view>
											  </template>
											<!-- 图片结束  -->
											<template v-slot:body>
											    <view class="doctorName">
											      <text>{{item.doctorName}}</text>
											    </view>
											    <view class="author">
											      <text>职称 | {{ item.position }}</text>
											      <text>主治 | {{ item.skilled }}</text>
												  <view class="price">
												  	 <text class="doctorPrice">¥{{ getYuan(item.price) }}</text>
												  </view>
												 
												 <!-- <text>好评率| {{ item.favorableRate }}</text> -->
												 <!-- <text>简介| {{ item.brief }}</text> -->
												  
											    </view>
											  </template>
										</uni-list-item>
									</uni-list>
								</view>
							</unicloud-db>
							<!-- 列表结束 -->
						</view>
					</uni-card>
				</view>
				<!-- 推荐医生结束 -->
				
			</view>			
			<view v-show="current === 1">
				<view class="doctor">
					<unicloud-db v-slot:default="{data, loading, error, options}" collection="doctor" where="department=='内科'">
						<view v-if="error">{{error.message}}</view>
						<view v-else>
							<uni-list>
								<uni-list-item v-for="(item, index) in data">
									<!-- 图片开始 -->
									<template v-slot:header>  
									    <view class="slot-box">
									      <image class="slot-image" :src="item.doctorImage.url" mode="widthFix"></image>
									    </view>
									  </template>
									<!-- 图片结束  -->
									<template v-slot:body>
									    <view class="doctorName">
									      <text>{{item.doctorName}}</text>
									    </view>
									    <view class="author">
									      <text>职称 | {{ item.position }}</text>
									      <text>主治 | {{ item.skilled }}</text>
										  <text class="doctorPrice">¥{{ getYuan(item.price) }}</text>
										 <!-- <text>好评率| {{ item.favorableRate }}</text> -->
										 <!-- <text>简介| {{ item.brief }}</text> -->
										  
									    </view>
									  </template>
								</uni-list-item>
							</uni-list>
						</view>
					</unicloud-db>
					<!-- 列表结束 -->
				</view>
			</view>
			<view v-show="current === 2">
				<view class="doctor">
					<unicloud-db v-slot:default="{data, loading, error, options}" collection="doctor" where="department=='妇科'">
						<view v-if="error">{{error.message}}</view>
						<view v-else>
							<uni-list>
								<uni-list-item v-for="(item, index) in data">
									<!-- 图片开始 -->
									<template v-slot:header>  
									    <view class="slot-box">
									      <image class="slot-image" :src="item.doctorImage.url" mode="widthFix"></image>
									    </view>
									  </template>
									<!-- 图片结束  -->
									<template v-slot:body>
									    <view class="doctorName">
									      <text>{{item.doctorName}}</text>
									    </view>
									    <view class="author">
									      <text>职称 | {{ item.position }}</text>
									      <text>主治 | {{ item.skilled }}</text>
										  <text class="doctorPrice">¥{{ getYuan(item.price) }}</text>
										 <!-- <text>好评率| {{ item.favorableRate }}</text> -->
										 <!-- <text>简介| {{ item.brief }}</text> -->
										  
									    </view>
									  </template>
								</uni-list-item>
							</uni-list>
						</view>
					</unicloud-db>
					<!-- 列表结束 -->
				</view>
			</view>
		</view>	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				classify:["首页","内科","妇科","妇产科","生殖医学科","儿科","眼科","耳鼻喉科"],
				current: 0,
				indicatorDtos:true,
				autoplay:true,
				interval:2000,
				duration:500,
				column: 3,
				vipItem: [
					{text: '签到取号', icon: '/static/更多服务.png'},
					{text: '候诊查询', icon: '/static/候诊查询@2x.png'},
					{text: '检查预约', icon: '/static/检查预约.png'},
					{text: '取药凭证', icon: '/static/门诊清单拷贝.png'},
					{text: '门诊清单', icon: '/static/签到.png'},
					{text: '更多服务', icon: '/static/取药凭证.png'},
				],
			}
		},
		methods: {
			getYuan(data){
			   let yuan = Math.floor(data / 100)
			   let fen = data % 100
			   if(fen == 0) fen = "00"
			   return yuan+'.'+fen
			 },
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
			},
			goToGrid(){
				uni.switchTab({
					url:'/pages/grid/grid'
				})
			},
		}
	}
</script>

<style>
	view{
		display: flex;
		box-sizing: border-box;
		flex-direction: column;
	}
.price{
	display: flex;
	flex-direction: row;
	line-height: 40rpx;
}
.page{
	background-color: #EEEEEE;
}
.header{
	display: flex;
	flex-direction: row;
	background-color: #FFFFFF;
}
.classify_scroll_x{
	white-space: nowrap;
	width: 650rpx;
	background-color: #FFFFFF;
	margin-top: 5rpx;
	margin-bottom: 8rpx;
}
.scroll-view-item_H {
	display: inline-block;
	width: 140rpx;
	height: 90rpx;
	line-height: 90rpx;
	text-align: center;
	font-size: 12rpx;
}
.scroll-view-item_selected{
	border-bottom: 2px solid red;
}

.uni-search-box{
	padding-top: 0px;
	padding-bottom: 0px;
	text-align: left;
	border-color: aqua;
}
.uni-margin-wrap{
	margin: 5rpx 10rpx;
	overflow: hidden;
	border-radius: 50rpx;
}
.swiper{
	height: 300rpx;
	border-radius: 150rpx;
}
.banner-image{
	width: 750rpx;
	height: 315rpx;
}
.grid-item-box{
	text-align: center;
	padding-top: 0px;
	width:100rpx;
	height: 250rpx;
	padding-left: 4px;
}
.grid-item-box2{
	text-align: center;
	justify-content: center;
	padding:10rpx 0 0 0;
}
.grid-item-box2 image{
	margin: 0 auto;
}
.classify_wrap {
	width: 750rpx;
	display: flex;
	flex-direction: row;
}
.classify_scroll_x{
	white-space: nowrap;
	width: 650rpx;
	background-color: #FFFFFF;
	margin-top: 5rpx;
	margin-bottom: 8rpx;
}
.classify_icon{
	display: flex;
	flex: 1;
	background-color: #FFFFFF;
	margin-left: 3rpx;
	margin-top: 5rpx;
	margin-bottom: 8rpx;
}
.segmented-wrap{
	width: 1300rpx;
}
.slot-box {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.slot-image {
  display: block;
  margin-right: 10px;
  width: 200rpx;
  height: 200rpx;
}
.doctorName{
	font-size: 40rpx;
	-webkit-box-orient: vertical;
	
}
.worker{
	padding-top: 0px;
}
</style>
